<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件处理器</title>
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<!--监听事件-->
		<div id="example-1">
			<button v-on:click="counter+=1">点击次数增加一次</button>
			<p>这个按钮被点击了{{counter}}次</p>
		</div>
		<br />
		<br />
		<br />
		<!--方法事件处理器-->
		<div id="example-2">
			<button v-on:click="btn">greet</button>
		</div>
		<br />
		<br />
		<br />
		<!--内联处理器方法-->
		<div id="example-3">
			<button v-on:click="say('hello')">hello</button>
			<button v-on:click="say('what')">what</button>
			<button v-on:click="warn('form cannot be submitted yet.',$event)">submit</button>
		</div>
		<!--事件修饰符-->
		<!--.stop
		.prevent
		.capture
		.self
		.once-->
		
		<!--按键修饰符-->
		
	</body>
	<script type="text/javascript">
//	          监听事件
		var example1=new Vue({
			el:'#example-1',
			data:{
				counter:0
			}
		});
//		方法事件处理器
		var example2=new Vue({
			el:'#example-2',
			data:{
				name:'Lhz'
			},
			methods:{
				btn:function(ev){
					alert('Hello '+this.name + ' !');
					alert(ev.target.tagName);
				}
			}
		});
//		直接调用此方法
        //example2.btn();
		
//		内联处理器方法
        var example3=new Vue({
        	el:'#example-3',
        	methods:{
        		say:function(data){
        			alert(data)
        		},
        		warn:function(message,event){
        			if(event) event.preventDefault()
        			alert(message)
        		}
        	}
        });
	</script>
</html>
